<template>
    <div class="location" >
       <div v-show="showPage">
          <div class="top clearfix">
            <i class="iconfont iconzuojiantou fl" @click="goIndex"></i>
                <form action="/" class="fl" style="width:80%">
                    <van-search
                        placeholder="请输入搜索关键词"
                        @cancel="onCancel"
                        @focus="onFocus"
                        @search="getPerPhone"
                    />
                </form>
                <span class="fl" style="font-size:0.26rem;color: #38a83f;line-height:1rem;
                text-align:center;display:inline-block;" @click="baocun">保存</span>
        </div>
        <!-- 内容 -->
        <div class="content">
            <div class="title">
                <div>
                  <h3 >
                    <span>当前定位</span><span @click="getSelectAgent">{{selectAgent}}</span>
                  </h3>
                </div>
                <div class="tit_sect">
                    <i class="iconfont icondingwei1"></i>
                    <span  v-show="loading">正在定位中
                        <van-loading size="16" type="spinner" color="#1989fa" style="display:inline-block"/> 
                    </span>
                    <span>{{location}}</span>
                    <span @click="getAllData">{{provinceVal||provinceVall}}</span>
                    <!-- <span>{{cityVal}}</span>
                    <span>{{areaVal}}</span> -->
                    <span style="color:#999" v-show="show">请选择县/区</span>
                </div>
            </div>
            <div class="indexBar">
                <van-index-bar>
                    <div v-for="(item,index) in arrList" :key="index">
                        <van-index-anchor :index="item.tag" v-if="item.textArray.length!=0" > </van-index-anchor>
                        <van-cell
                          :title="items.areaname"
                           v-for="(items,indexs) in item.textArray " 
                           :key="indexs" 
                            @click="getCity(items.areaname ,items.areaid)"
                          />
                    </div>
                   
                   
                </van-index-bar>
            </div>

        </div>
       </div>
       <div class="showPages" v-show="showPages">
           <div class="top clearfix">
            <i class="iconfont iconzuojiantou fl" @click="goIndex"></i>
                <form action="/" class="fl" style="width:80%">
                    <van-search
                        v-model="value"
                        placeholder="请输入搜索关键词"
                        @search="onSearch"
                    />
                </form>
                 <span @click="onSearch" class="fl" style="font-size:0.26rem;color: #38a83f;line-height:1rem;
                text-align:center;display:inline-block;">搜索</span>
           </div> 
            <!-- 内容 -->
        <div class="content" v-show="conVal">
            <!-- <div class="title">
                <div class="tit_sect">
                    <span>{{location}}</span>
                    <span @click="getAllData">{{provinceVal}}</span>
                </div>
            </div> -->
            <div class="indexBar">
                <van-index-bar>
                    <div v-for="(item,index) in arrList" :key="index">
                        <van-index-anchor :index="item.tag" v-if="item.textArray.length!=0" > </van-index-anchor>
                        <van-cell
                          :title="items.areaname"
                           v-for="(items,indexs) in item.textArray " 
                           :key="indexs" 
                            @click="getCity(items.areaname ,items.areaid)"
                          />
                    </div>
                   
                   
                </van-index-bar>
            </div>

        </div>
       </div>
       <van-overlay :show="shows"  @click="shows = false" style="font-size:0.26rem;">
        <div class="wrapper" >
          <div class="block" v-if="selectAgent=='选择代理'">
            <div>提示</div>
            <div style="padding:0.5rem 0 0.5rem 0">必须选择代理商才可以进行保存哦~</div>
            <div>知道了~</div>
          </div>
          <div class="block" v-else>
            <ul>
              <li v-for="(item,index) in pingtaiList" :key="index" @click="selectPerson(item.userName,item.userTel,item.userId)">
                <span>{{item.userName}}</span><span>{{item.userTel}}</span>
              </li>
            
            </ul>
          </div>
        </div>
      </van-overlay>
    </div>
</template>

<script>
import { Toast ,Overlay } from "vant";
export default {
  data() {
    return {
      value: "",
      loading: "true",
      provinceVal: "",
      provinceVall: "",
      cityVal: "",
      areaVal: "",
      arrList: [
        { tag: "A", textArray: [] },
        { tag: "B", textArray: [] },
        { tag: "C", textArray: [] },
        { tag: "D", textArray: [] },
        { tag: "E", textArray: [] },
        { tag: "F", textArray: [] },
        { tag: "G", textArray: [] },
        { tag: "H", textArray: [] },
        { tag: "I", textArray: [] },
        { tag: "J", textArray: [] },
        { tag: "K", textArray: [] },
        { tag: "L", textArray: [] },
        { tag: "M", textArray: [] },
        { tag: "N", textArray: [] },
        { tag: "O", textArray: [] },
        { tag: "P", textArray: [] },
        { tag: "Q", textArray: [] },
        { tag: "R", textArray: [] },
        { tag: "S", textArray: [] },
        { tag: "T", textArray: [] },
        { tag: "U", textArray: [] },
        { tag: "V", textArray: [] },
        { tag: "W", textArray: [] },
        { tag: "X", textArray: [] },
        { tag: "Y", textArray: [] },
        { tag: "Z", textArray: [] },
        { tag: "#", textArray: [] }
      ],
      arr: [],
      location: "",
      showPage: true,
      showPages: false,
      flag: true,
      conVal: false,
      show: true,
      shows:true,
      selectAgent:"选择代理"
    };
  },
  created() {
    setTimeout(() => {
      this.loading = false;
      this.location = this.$route.query.location;
      this.provinceVall = this.$route.query.province;
    }, 2000);

    //获取到整个省份
    this.getAllData();
  },
  methods: {
    getSelectAgent(){
      console.log(this.provinceVal);
       this.$axios.post("/cct/num/findByAreaName",{
        resellerAddress:this.provinceVal
      }).then(res =>{
        console.log("查询代理商",res)
        if(res.data.code==0){
          this.pingtaiList=res.data.data; 
          this.shows=true;
          this.selectAgent='请选择'
          
        }
      })
    },
    selectPerson(name,phone,userId){
        this.selectAgent =name+''+phone; 
        localStorage.setItem("sectedId",userId) 
    },
    onSearch(val) {
      this.provinceVall = ""
      this.provinceVal = ""
      if (this.value) {

        this.fuzzyQuery();
        this.conVal = true;
      }
    },
    onCancel() {
      if (this.val) {
        this.fuzzyQuery();
        this.conVal = true;
      }
    },
    onFocus() {
      // if(this.flag){
      //   this.axtionText = "搜索";
      //   this.flag=false;
      // }else{
      //   this.axtionText = "保存";
      //   this.flag=true;
      // }
      this.showPage = false;
      this.showPages = true;
    },
    onBlur() {
      // this.axtionText = "保存";
      // Toast("失去焦点");
      // this.showPages=true;
      // this.showPage=false
    },
    goIndex() {
      this.$router.go(-1);
    },
    //获取全部数据
    getAllData() {
      (this.arrList = [
        { tag: "A", textArray: [] },
        { tag: "B", textArray: [] },
        { tag: "C", textArray: [] },
        { tag: "D", textArray: [] },
        { tag: "E", textArray: [] },
        { tag: "F", textArray: [] },
        { tag: "G", textArray: [] },
        { tag: "H", textArray: [] },
        { tag: "I", textArray: [] },
        { tag: "J", textArray: [] },
        { tag: "K", textArray: [] },
        { tag: "L", textArray: [] },
        { tag: "M", textArray: [] },
        { tag: "N", textArray: [] },
        { tag: "O", textArray: [] },
        { tag: "P", textArray: [] },
        { tag: "Q", textArray: [] },
        { tag: "R", textArray: [] },
        { tag: "S", textArray: [] },
        { tag: "T", textArray: [] },
        { tag: "U", textArray: [] },
        { tag: "V", textArray: [] },
        { tag: "W", textArray: [] },
        { tag: "X", textArray: [] },
        { tag: "Y", textArray: [] },
        { tag: "Z", textArray: [] },
        { tag: "#", textArray: [] }
      ]),
        (this.arr = []),
        this.provinceVal='',
        this.$axios.post("/cct/area/findLivelOne", {}).then(res => {
          console.log(res);
          if (res.data.code == 0) {
            this.arr = res.data.data;
            for (var i = 0; i < this.arr.length; i++) {
              for (var j = 0; j < this.arrList.length; j++) {
                if (this.arr[i].initial == this.arrList[j].tag) {
                  this.arrList[j].textArray.push({
                    areaname: this.arr[i].areaname,
                    areaid: this.arr[i].areaid
                  });
                }
              }
            }
          }
        });
    },
    //根据省份id ,获取城市
    getCity(name, num) {
      // var that = this;
      (this.provinceVall = ""),
        (this.provinceVal =
          name != this.provinceVal ? this.provinceVal + name : name);
      console.log(this.provinceVal, "根据省份id");
      Toast(name, num);
      this.arrList = [
        { tag: "A", textArray: [] },
        { tag: "B", textArray: [] },
        { tag: "C", textArray: [] },
        { tag: "D", textArray: [] },
        { tag: "E", textArray: [] },
        { tag: "F", textArray: [] },
        { tag: "G", textArray: [] },
        { tag: "H", textArray: [] },
        { tag: "I", textArray: [] },
        { tag: "J", textArray: [] },
        { tag: "K", textArray: [] },
        { tag: "L", textArray: [] },
        { tag: "M", textArray: [] },
        { tag: "N", textArray: [] },
        { tag: "O", textArray: [] },
        { tag: "P", textArray: [] },
        { tag: "Q", textArray: [] },
        { tag: "R", textArray: [] },
        { tag: "S", textArray: [] },
        { tag: "T", textArray: [] },
        { tag: "U", textArray: [] },
        { tag: "V", textArray: [] },
        { tag: "W", textArray: [] },
        { tag: "X", textArray: [] },
        { tag: "Y", textArray: [] },
        { tag: "Z", textArray: [] },
        { tag: "#", textArray: [] }
      ];
      this.arr = [];
      this.$axios
        .post("/cct/area/findAllByAreaId", {
          areaid: num
        })
        .then(res => {
          console.log(res);
          this.show = res.data.data.length == 0 ? false : true;
          if (res.data.code == 0) {
            this.arr = res.data.data;
            for (var i = 0; i < this.arr.length; i++) {
              for (var j = 0; j < this.arrList.length; j++) {
                if (this.arr[i].initial == this.arrList[j].tag) {
                  this.arrList[j].textArray.push({
                    areaname: this.arr[i].areaname,
                    areaid: this.arr[i].areaid
                  });
                }
              }
            }
          }
        });
      localStorage.setItem("location", name);
     
    },
    //模糊查询
    fuzzyQuery() {
      this.arrList = [
        { tag: "A", textArray: [] },
        { tag: "B", textArray: [] },
        { tag: "C", textArray: [] },
        { tag: "D", textArray: [] },
        { tag: "E", textArray: [] },
        { tag: "F", textArray: [] },
        { tag: "G", textArray: [] },
        { tag: "H", textArray: [] },
        { tag: "I", textArray: [] },
        { tag: "J", textArray: [] },
        { tag: "K", textArray: [] },
        { tag: "L", textArray: [] },
        { tag: "M", textArray: [] },
        { tag: "N", textArray: [] },
        { tag: "O", textArray: [] },
        { tag: "P", textArray: [] },
        { tag: "Q", textArray: [] },
        { tag: "R", textArray: [] },
        { tag: "S", textArray: [] },
        { tag: "T", textArray: [] },
        { tag: "U", textArray: [] },
        { tag: "V", textArray: [] },
        { tag: "W", textArray: [] },
        { tag: "X", textArray: [] },
        { tag: "Y", textArray: [] },
        { tag: "Z", textArray: [] },
        { tag: "#", textArray: [] }
      ];
      this.arr = [];
      this.$axios
        .post("/cct/area/findAllByName", {
          areaname: this.value
        })
        .then(res => {
          console.log("模糊查询");
          console.log(res);
          if (res.data.code == 0) {
            this.arr = res.data.data;
            for (var i = 0; i < this.arr.length; i++) {
              for (var j = 0; j < this.arrList.length; j++) {
                if (this.arr[i].initial == this.arrList[j].tag) {
                  this.arrList[j].textArray.push({
                    areaname: this.arr[i].areaname,
                    areaid: this.arr[i].areaid
                  });
                }
              }
            }
          }
        });
    },
   
    getPerPhone (){
        this.$axios.post('/cct/num/findByAreaName',{
          resellerAddress:this.value
        }).then(res =>{ 
            console.log("精准查询",res)
        })
    },
    //点击保存
    baocun() {
      if(this.selectAgent=='选择代理'){
         this.shows=true;
         return false;
      }
     
      this.$router.push({
        path: "/index",
        query: {
          val: this.provinceVal
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.location {
  width: 100%;
  background-color: #f8f8f8;
  font-size: 0;
  position: relative;
  .top {
    height: 1.2rem;
    .iconzuojiantou {
      display: inline-block;
      width: 10%;
      height: 100%;
      line-height: 1rem;
      text-align: center;
      background-color: #fff;
    }
  }
  .title {
    width: 100%;
    padding: 0.2rem;
    box-sizing: border-box;
    font-size: 0.26rem;
    h3 {
      color: #636363;
      font-size: 0.24rem;
      margin-bottom: 0.15rem;
      display: flex;
      justify-content: space-between;
      span:nth-child(2){
        color:#38A83F;
      }
    }
    .tit_sect {
      padding: 0.15rem 0.1rem;
      box-sizing: border-box;
      i {
        font-size: 0.36rem;
        color: #38a83f;
        margin-right: 0.2rem;
      }
      span {
        color: #1c1c1c;
        font-size: 0.3rem;
        margin-right: 0.4rem;
      }
      select {
        margin-top: -5px;
        padding: 0.05rem 1.5rem;
        background: #f8f8f8;
        option {
          background-color: #fff;
        }
      }
    }
  }
   .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }

  .block {
    width: 70%;
    height:4rem;
    border-radius: 0.2rem;
    overflow-y: scroll;
    background-color: #fff;
    padding:0.2rem;
    box-sizing: border-box;
    text-align: center;
    ul{
      overflow-y: scroll;
    }
    li{
      display: flex;
      justify-content: space-around;
      width: 60%;
      margin: 0 auto;
      padding:0.15rem;
      box-sizing: border-box;
    }
  }
}
</style>

